<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算属性02</title>
  <script type="text/javascript" src="../vue.js"></script>
</head>

<body>
<!-- 准备好 一个容器-->
<div id="root">
    姓：<input type="text" v-model="firstName"><br/>
    名：<input type="text" v-model="lastName"><br/>
    全名：<span>{{fullName()}}</span>
</div>


<script type="text/javascript">

  Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示。

  //创建Vue实例
  const vm = new Vue({
    el:'#root',
      data:{
        firstName:'张',
        lastName:'三'
      },
      methods:{
        fullName(){
            return this.firstName.slice(0,3)+'-'+this.lastName
        }
      }
  })




</script>




</body>
</html>
